<template>
  <main>
    <el-card>
      <el-row>
        <el-col :span="8">
          <el-input
            placeholder="输入作者id"
            v-model="writerID"
            clearable
          ></el-input>
        </el-col>
        <el-col :span="8">
          <el-button icon="el-icon-search" @click="getWriter">搜索</el-button>
        </el-col>
      </el-row>
      <el-table :data="wForm" border style="width: 100%" stripe>
        <el-table-column prop="_id" label="id" width="240">
          <template slot-scope="slot">
            <h4 @click="toWriter(slot.row._id)">{{ slot.row._id }}</h4>
          </template>
        </el-table-column>
        <el-table-column prop="username" label="作者名" width="220">
        </el-table-column>
        <el-table-column prop="state" label="状态" width="180">
          <template slot-scope="slot">
            <el-button
              type="success"
              plain
              v-if="slot.row.state == 0"
              @click="feng(slot.row._id)"
              >正常，点击封禁</el-button
            >
            <el-button
              type="warning"
              plain
              v-if="slot.row.state == 1"
              @click="jie(slot.row._id)"
              >封禁中，点击解封</el-button
            >
          </template>
        </el-table-column>
        <el-table-column
          prop="date"
          label="创建时间"
          width="240"
        ></el-table-column>
        <el-table-column prop="email" label="邮箱" width="240">
          <template slot-scope="slot">
            <h4 @click="sendEmail(slot.row.email)">{{ slot.row.email }}</h4>
          </template>
        </el-table-column>
        <el-table-column label="操作">
          <template slot-scope="slot">
            <el-button type="danger" @click="removeThisWriter(slot.row._id)"
              >删除</el-button
            >
          </template>
        </el-table-column>
      </el-table>
        <!-- 分页 -->
    <div class="block">
    <span class="demonstration">共有{{isLength}}条记录</span>
    <el-pagination
      @current-change="handleCurrentChange"
      :current-page.sync="currentPage"
      layout="prev, pager, next, jumper"
      :page-size="10"
      :total="isLength">
    </el-pagination>
  </div>
    </el-card>
    <!-- 写邮件窗口 -->
    <el-dialog
      title="提示"
      :visible.sync="dialogVisible"
      width="30%"
      :show-close="false"
      :close-on-click-modal="false"
      :close-on-press-escape="false"
    >
      <el-input
        type="textarea"
        :rows="2"
        placeholder="请输入内容"
        v-model="textarea"
        :autosize="{ minRows: 2, maxRows: 8}"
        resize="none"
      >
      </el-input>
      <span slot="footer" class="dialog-footer">
        <el-button @click="closeDialogVisible">取 消</el-button>
        <el-button type="primary" @click="sub"
          >确 定</el-button
        >
      </span>
    </el-dialog>
  </main>
</template>
<script>
export default {
  created(){
    this.getAll();
  },
  data() {
    return {
      thisemail:"",
      textarea: "",
      dialogVisible: false,
      writerID: "",
      writerForm: [        // {
        //   id: "",
        //   username: "",
        //   date: "",
        //   state: "",
        // },
        ],
      wForm:[],
      isLength: 0,
      currentPage: 1,
      pageSize: 10,
    };
  },
  methods: {
    async getAll(){
      const {data:res} =await this.$http.post("writers/allWriter",{
        pageSize: this.pageSize,
        currentPage: this.currentPage,
      })
      this.isLength = res.num;
      this.wForm = res.data;
    },
    handleCurrentChange(val) {
      this.currentPage = val;
      this.getAll();
    },
    async getWriter() {
      const { data: res } = await this.$http.get(
        `/writers/ceshi/${this.writerID}`
      );
      this.isLength = 1;
      this.wForm = [];
      this.wForm[0] = res.data;
      //console.log(this.wForm[0]);
      //this.writerForm[0] = res.data
      // this.writerForm[0].id = res.data._id;
      // this.writerForm[0].username = res.data.username;
      // this.writerForm[0].date = res.data.date;
      // this.writerForm[0].state = res.data.state;
      // this.writerForm[0].email = res.data.email;
    },
    async feng(id) {
      const { data: res } = await this.$http.post(
        `/writers/updateWriterState/${id}`,
        {
          state: 1,
        }
      );
      if (res.status == 200) {
        this.$message.success("封禁成功");
        if(this.writerID == ''){
          this.getAll();
          return
        } else{
          this.getWriter();
          return
        }
      } else {
        this.$message.error("封禁失败");
      }
    },
    async jie(id) {
      const { data: res } = await this.$http.post(
        `/writers/updateWriterState/${id}`,
        {
          state: 0,
        }
      );
      if (res.status == 200) {
        this.$message.success("解禁成功");
        if(this.writerID == ''){
          this.getAll();
          return
        } else{
          this.getWriter();
          return
        }
      } else {
        this.$message.error("解禁失败");
      }
    },
    sendEmail(email) {
      this.dialogVisible = true;
      this.thisemail = email;
      //console.log(this.thisemail);
    },
    closeDialogVisible(){
      this.dialogVisible = false;
      this.textarea = '';
    },
    async sub(){ 
      if(this.textarea.trim().length <20){
        this.$$message.error("输入字数太少，至少二十字")
        return
      }
      else{
        const {data:res} = await this.$http.post('/sendEmail/sendForWriter',{email:this.thisemail,msg:this.textarea});
        if(res == "OK"){
          this.$message.success("发送成功")
          this.dialogVisible = false;
          this.textarea = "";
        }
      }
    },
    toWriter(id) {
      let routeUrl = this.$router.resolve(`/toWriter/${id}`);
      window.open(routeUrl.href, "_blank");
    },
    removeThisWriter(id) {
      this.$confirm('此操作将永久删除该作者, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(async () => {
          const {data:res} = await this.$http.delete(`/writers/deleteThisWriter/${id}`)
          if(res == 'OK'){
            this.getAll();
            this.$message({
              type: 'success',
              message: '删除成功!'
            });
            return
          } else {
            this.$message.error("删除失败")
          }
          
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          });          
        });
    },
  },
};
</script>
<style lang="less" scoped>
main {
  width: 100%;
  height: 100%;
}
h4:hover {
  color: blue;
  cursor: pointer;
}
</style>
